<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/header.css" rel="stylesheet">
		<style>
			.time{
				
			}
			.total{
				float:right;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">运动记录</h1>
		</header>
		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1">健走</a>
					<a class="mui-control-item" href="#item2">跑步</a>
					<a class="mui-control-item" href="#item3">骑行</a>
					<a class="mui-control-item" href="#item4">无氧</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
						<ul class="mui-table-view" id="ul_walking">
							<li class="mui-table-view-cell">
								<span class="time">2019-06-01 21:00:00</span>
								<span class="total">30秒</span>
							</li>
							<li class="mui-table-view-cell">第1个选项卡子项</li>
						</ul>
					</div>
					<div id="item2" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view" id="ul_runing">
							<li class="mui-table-view-cell">第2个选项卡子项</li>
							<li class="mui-table-view-cell">第2个选项卡子项</li>
						</ul>
					</div>
					<div id="item3" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view" id="ul_bike">
							
						</ul>
					</div>
					<div id="item4" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view" id="ul_training">
							<li class="mui-table-view-cell">第2个选项卡子项</li>
							
						</ul>
					</div>
				</div>
			</div>	
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				var uid = self.uid;
				var size = 20;
				var num = 1;
				mui.ajax(app.serverUrl+'/sport/selectByType',{
					data:{
						uid:uid,
						type:"健走",
						pageNum:num,
						pageSize:size
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
						addrecord(data.list,1);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
				mui.ajax(app.serverUrl+'/sport/selectByType',{
					data:{
						uid:uid,
						type:"跑步",
						pageNum:num,
						pageSize:size
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
						addrecord(data.list,2);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
				mui.ajax(app.serverUrl+'/sport/selectByType',{
					data:{
						uid:uid,
						type:"骑行",
						pageNum:num,
						pageSize:size
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
						addrecord(data.list,3);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
				mui.ajax(app.serverUrl+'/sport/selectByType',{
					data:{
						uid:uid,
						type:"无氧",
						pageNum:num,
						pageSize:size
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
						addrecord(data.list,4);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
			});
			function addrecord(list,itemnum){
				var ul_item;
				if(itemnum == 1){
					ul_item = document.getElementById("ul_walking");
				}else if(itemnum == 2){
					ul_item = document.getElementById("ul_runing");
				}else if(itemnum == 3){
					ul_item = document.getElementById("ul_bike");
				}else if(itemnum == 4){
					ul_item = document.getElementById("ul_training");
				}
				
				
				for(var i=0;i<list.length;i++){
					var li = document.createElement("li");
					li.className = "mui-table-view-cell";
					var span1 = document.createElement("span");
					span1.className = "time";
					span1.innerHTML = list[i].day+" "+list[i].endtime;
					var span2 = document.createElement("total");
					span2.className = "total";
					span2.innerHTML = checkTime(list[i].total);
					li.appendChild(span1);
					li.appendChild(span2);
					ul_item.appendChild(li);
				}
			}
			
			function checkTime(data){
				var strtime = parseInt(data);
				if(strtime>=60){
					strtime = Math.ceil(strtime/60);
					console.log(strtime);
					return strtime+"分钟";
				}
				return strtime+"秒";
			}
		</script>
	</body>

</html>
